﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}

<div class="wrapper wrapper-content" id="app">
    <div class="row">
            <div id="searchDiv" class="col-sm-12 search-collapse">
                <div class="select-list">
                    <ul>
                        <li>
                            分类名称：<input id="type_name" col="type_name" type="text" />
                        </li>
                        <li>
                            <a id="btnSearch" class="btn btn-primary btn-sm" onclick="searchGrid()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="btn-group-sm hidden-xs" id="toolbar">
                <a id="btnAdd" class="btn btn-success" onclick="showSaveForm(true)"><i class="fa fa-plus"></i> 新增</a>
                <a id="btnEdit" class="btn btn-primary disabled" onclick="showSaveForm(false)"><i class="fa fa-edit"></i> 修改</a>
                <a id="btnDelete" class="btn btn-danger disabled" onclick="deleteForm()"><i class="fa fa-remove"></i> 删除</a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="gridTable" data-mobile-responsive="true"></table>
            </div>
        </div>
    @*<template>
        <el-table :data="tableData"
                  border
                  size="mini"
                  :stripe="stripe"
                  style="width: 100%">
            <el-table-column fixed
                             align="center"
                             prop="type_name"
                             label="产品类型">
            </el-table-column>
            <el-table-column fixed="right"
                             align="center"
                             label="操作">
                <template slot-scope="scope">
                    <el-button size="mini"
                               v-on:click="handleClick(scope.row)">编辑</el-button>
                    <el-button size="mini"
                               type="danger"
                               v-on:click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination v-on:size-change="handleSizeChange"
                           v-on:current-change="handleCurrentChange"
                           :page-sizes="[10, 15, 20]"
                           :page-size="search.pagination.pagesize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="search.pagination.total">
            </el-pagination>
        </div>

        <el-dialog title="产品类型属性" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" border
                  size="mini"
                  :stripe="stripe"
                  style="width: 100%">
                <el-table-column property="type_name" label="日期"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-on:@click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </template>*@
</div>

<script type="text/javascript">

    @*function objectToQueryString(obj) {
        return Object.keys(obj).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(obj[key])).join('&');
    }


    // 创建 Vue 实例
    new Vue({
        el: '#app',  // 挂载到 id 为 app 的元素
        data: {
            tableData: [],
            formLabelWidth: '120px',
            dialogFormVisible: false,
            form: {

            },
            search: {
                param: {},
                pagination: {
                    currentPage: 1,
                    pagesize: 10,
                    Sort: 'Id',
                    SortType:' desc ',
                    total: 0,
                }
            },
            stripe: true,//是否为斑马纹 table
        },
        methods: {
            handleSizeChange(val) {
                debugger;
                this.search.pagination.pagesize = val;
                this.search.pagination.currentPage =1;
                this.initGrid();
            },
            handleCurrentChange(val) {
                this.search.pagination.currentPage = val;
                this.initGrid();
            },
            handleClick: function (row) {
                this.dialogFormVisible = true;
            },
            initGrid() {
                var that = this;
                var paramQueryString = objectToQueryString(this.search.param);
                var paginationQueryString = objectToQueryString(this.search.pagination);
                var queryString = paramQueryString + '&' + paginationQueryString;
                $.ajax({
                    type: 'Get',
                    dataType: 'json',
                    url: '@Url.Content("~/QixingManage/GoodsTypes/GetPageListJson")' + '?' + queryString,
                    success: function (obj) {
                        if (obj.Tag == 1) {
                            that.tableData = obj.Data;
                            that.search.pagination.total = obj.Total;
                        }
                    }
                });
            }
        },
        created() {
            console.log('Vue instance created');
        },
        mounted() {
            this.initGrid();
        }
    });*@

    $(function () {
        initGrid();
    });

    function initGrid() {
        var queryUrl = '@Url.Content("~/QixingManage/GoodsTypes/GetPageListJson")';
        $('#gridTable').ysTable({
            url: queryUrl,
            columns: [
                { checkbox: true, visible: true },
                { field: 'Id', title: 'Id', visible: false },
                { field: 'type_name', title: '产品种类' },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs" href="#" onclick="GoodsAttributes(\'' + row.Id + '\')"><i class="fa fa-list-ul"></i>产品属性</a>');
                        return actions.join('');
                    }
                }
            ],
            queryParams: function (params) {
                var pagination = $('#gridTable').ysTable('getPagination', params);
                var queryString = $('#searchDiv').getWebControls(pagination);
                return queryString;
            }
        });
    }

    function GoodsAttributes(id)
    {
        var url = '@Url.Content("~/QixingManage/GoodsAttributes/GoodsAttributesIndex")' + '?goods_types_id=' + id;
        createMenuItem(url, "产品属性管理");
     }

    function searchGrid() {
        $('#gridTable').ysTable('search');
        resetToolbarStatus();
    }

    function showSaveForm(bAdd) {
        var id = 0;
        if (!bAdd) {
            var selectedRow = $('#gridTable').bootstrapTable('getSelections');
            if (!ys.checkRowEdit(selectedRow)) {
                return;
            }
            else {
                id = selectedRow[0].Id;
            }
        }
        ys.openDialog({
            title: id > 0 ? '编辑' : '添加',
            content: '@Url.Content("~/QixingManage/GoodsTypes/GoodsTypesForm")' + '?id=' + id,
            width: '1200px',
            height: '700px',
            callback: function (index, layero) {
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.saveForm(index);
            }
        });
    }

    function deleteForm() {
        var selectedRow = $('#gridTable').bootstrapTable('getSelections');
        if (ys.checkRowDelete(selectedRow)) {
            ys.confirm('确认要删除选中的' + selectedRow.length + '条数据吗？', function () {
                var ids = ys.getIds(selectedRow);
                ys.ajax({
                    url: '@Url.Content("~/QixingManage/GoodsTypes/DeleteFormJson")' + '?ids=' + ids,
                    type: 'post',
                    success: function (obj) {
                        if (obj.Tag == 1) {
                            ys.msgSuccess(obj.Message);
                            searchGrid();
                        }
                        else {
                            ys.msgError(obj.Message);
                        }
                    }
                });
            });
        }
    }
</script>
